<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Page page floats</title>
  <style>
    @page {
      size: 620px;
      margin: 10px;
    }
    :root {
      column-count: 2;
      font-family: Arial, sans-serif;
      font-size: 16px;
      line-height: 20px;
      widows: 1;
      orphans: 1;
    }
    body {
      margin: 8px;
    }
    p {
      background: rgba(100, 100, 100, 0.2);
      border: blue dashed;
    }
    .float {
      float-reference: column;
      background: rgba(100, 100, 255, 0.2);
    }
    .top {
      float: block-start;
      float: column-top;
      -ah-float: top multicol;
    }
    .bottom {
      float: block-end;
      float: column-bottom;
      -ah-float: bottom multicol;
    }
    .span-all {
      column-span: all;
    }
    .span-auto {
      column-span: all;
      column-span: auto;
    }
    .spacer {
      background: pink;
      width: 400px;
    }
  </style>
</head>
<body>
<p>(1) Background of p elements is lightgray. This is normal text inside two columns. This is normal text inside two columns. This is normal text inside two columns. This is normal text inside two columns.</p>
<p>(2) Background of p elements is lightgray. This is normal text inside two columns. This is normal text inside two columns. This is normal text inside two columns. This is normal text inside two columns.</p>
<p>(3) Background of p elements is lightgray. This is normal text inside two columns. This is normal text inside two columns. This is normal text inside two columns. This is normal text inside two columns.</p>
<div class="float bottom span-all">
  (a) Background of page floats is lightblue. This is a bottom float with column-span: all. This is a bottom float with column-span: all. This is a bottom float with column-span: all. This is a bottom float with column-span: all. This is a bottom float with column-span: all.
  <div class="spacer">spacer</div>
</div>
<p>(4) Background of p elements is lightgray. This is normal text inside two columns. This is normal text inside two columns. This is normal text inside two columns. This is normal text inside two columns. This is normal text inside two columns. This is normal text inside two columns.</p>
<div class="float top span-auto">
  (b) Background of page floats is lightblue. This is a top float with column-span: auto. This is a top float with column-span: auto. This is a top float with column-span: auto. This is a top float with column-span: auto. This is a top float with column-span: auto.
  <div class="spacer">spacer</div>
</div>
<p>(5) Background of p elements is lightgray. This is normal text inside two columns. This is normal text inside two columns. This is normal text inside two columns. This is normal text inside two columns. This is normal text inside two columns. This is normal text inside two columns.</p>
<p>(6) Background of p elements is lightgray. This is normal text inside two columns. This is normal text inside two columns. This is normal text inside two columns. This is normal text inside two columns.</p>
<div class="float top span-all">
  (c) Background of page floats is lightblue. This is a top float with column-span: all. This is a top float with column-span: all. This is a top float with column-span: all. This is a top float with column-span: all. This is a top float with column-span: all.
</div>
<p>(7) Background of p elements is lightgray. This is normal text inside two columns. This is normal text inside two columns. This is normal text inside two columns. This is normal text inside two columns. This is normal text inside two columns. This is normal text inside two columns.</p>
<p>(8) Background of p elements is lightgray. This is normal text inside two columns. This is normal text inside two columns. This is normal text inside two columns. This is normal text inside two columns. This is normal text inside two columns. This is normal text inside two columns.</p>
<p>(9) Background of p elements is lightgray. This is normal text inside two columns. This is normal text inside two columns. This is normal text inside two columns. This is normal text inside two columns. This is normal text inside two columns. This is normal text inside two columns.</p>
<p>(10) Background of p elements is lightgray. This is normal text inside two columns. This is normal text inside two columns. This is normal text inside two columns. This is normal text inside two columns. This is normal text inside two columns. This is normal text inside two columns.</p>
<p>(11) Background of p elements is lightgray. This is normal text inside two columns. This is normal text inside two columns. This is normal text inside two columns. This is normal text inside two columns. This is normal text inside two columns.</p>
<div class="float bottom span-auto">
  (d) Background of page floats is lightblue. This is a bottom float with column-span: auto. This is a bottom float with column-span: auto. This is a bottom float with column-span: auto. This is a bottom float with column-span: auto. This is a bottom float with column-span: auto.
</div>
<p>(12) Background of p elements is lightgray. This is normal text inside two columns. This is normal text inside two columns. This is normal text inside two columns. This is normal text inside two columns. This is normal text inside two columns. This is normal text inside two columns.</p>
</body>
</html>
